<template>

  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-card class="box-card">
      <span>基本信息</span>
      <div class="text item">
        <el-form-item label="订单号">
          <el-input v-model="ruleForm.orderNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-input v-model="ruleForm.addTime" disabled></el-input>
        </el-form-item>

        <el-form-item label="订单状态">
          <el-input v-model="ruleForm.statusString" disabled></el-input>
        </el-form-item>
        <el-form-item label="汽车总数量">
          <el-input v-model="ruleForm.carSumNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="融资经销商">
          <el-input v-model="ruleForm.dealerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="采购总金额(元)">
          <el-input type="textarea" :value="ruleForm.purchaseSumMoney| toFixed2" disabled></el-input>
          <span class="convertCurrency">{{ruleForm.purchaseSumMoney|convertCurrency}}</span>
        </el-form-item>
        <el-form-item label="融资总金额(元)">
          <el-input type="textarea" :value="ruleForm.mortgageSumMoney| toFixed2" disabled></el-input>
          <span class="convertCurrency">{{ruleForm.mortgageSumMoney|convertCurrency}}</span>
        </el-form-item>
        <el-form-item label="融资比例(%)">
          <el-input :value="(((ruleForm.mortgageSumMoney)/(ruleForm.purchaseSumMoney)*100-0).toFixed(2)||'')+'%'" disabled></el-input>
        </el-form-item>
        <el-form-item label="物管验车意见">
          <el-input v-model="ruleForm.propertyInspectionOpinion" disabled></el-input>
        </el-form-item>
        <el-form-item label="物管验车审核人">
          <el-input v-model="ruleForm.propertyInspectionPeople" disabled></el-input>
        </el-form-item>
        <el-form-item label="物管验车审核时间">
          <el-input :value="getDate(ruleForm.propertyInspectionTime)" disabled></el-input>
        </el-form-item>

        <el-form-item label="风控审核意见">
          <el-input v-model="ruleForm.riskAuditOpinion" disabled></el-input>
        </el-form-item>
        <el-form-item label="风控审核人">
          <el-input v-model="ruleForm.riskAuditPeople" disabled></el-input>
        </el-form-item>
        <el-form-item label="风控审核时间">
          <el-input :value="getDate(ruleForm.riskAuditTime)" disabled></el-input>
        </el-form-item>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>车辆信息</span>
      </div>


      <el-collapse v-model="ruleFrom" @change="handleChange">
        <el-collapse-item :title="item.carName"  v-for='(item,index) in ruleForm.carTypes' :key='item'>
          <div class="text item">
            <el-form-item label="汽车数量(台)">
              <el-input v-model="item.carCount" disabled></el-input>
            </el-form-item>
            <el-form-item label="指导价(元)">
              <el-input :value="item.guidePrice| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{item.guidePrice|convertCurrency}}</span>
            </el-form-item>
            <el-form-item label="采购单价(元)">
              <el-input :value="item.carPurchasePrice| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{item.carPurchasePrice|convertCurrency}}</span>
            </el-form-item>
               <el-form-item label="采购金额(元)">
              <el-input :value="item.carPurchaseMoney| toFixed2" disabled></el-input>
              <span class="convertCurrency">{{item.carPurchaseMoney|convertCurrency}}</span>
            </el-form-item>
            <el-form-item label="配置">
              <el-input v-model="item.carConfig" type='textarea' disabled></el-input>
            </el-form-item>
            <el-form-item label="融资金额(元)" :prop="'carTypes.' + index + '.carMortgageMoney'"
              :rules="inspect(true,'融资金额')">
                <el-input v-number='2' v-model.number="item.carMortgageMoney" :disabled='dialogSendData.isAdd'></el-input>
                <span class="convertCurrency">{{item.carMortgageMoney|convertCurrency}}</span>
            </el-form-item>
       

            <el-form-item label="采购合同">
              <qiniu :qiniuImage="item.carContractPics" :id="item.carContractPics.id" :canDelete="false"></qiniu>
            </el-form-item>

            <el-container v-for='(childItem,key) in item.mortgageInspectionList' :key="key">
            <el-header class='title'>数量{{key+1}}</el-header>
            <el-form-item label="汽车颜色">
              <el-input v-model="childItem.color" disabled></el-input>
            </el-form-item>
            <el-form-item label="车架号">
              <el-input v-model="childItem.vin" disabled></el-input>
            </el-form-item>
            
            <el-form-item label="发动机号">
              <el-input v-model="childItem.engineNumber" disabled></el-input>
            </el-form-item>
            <el-form-item label="生产日期">
              <el-input v-model="childItem.productionDate" disabled></el-input>
            </el-form-item>

            <el-form-item label="验车照片">
              <qiniu :qiniuImage="childItem.inspectionPics" :id="childItem.inspectionPics.id" ></qiniu>
            </el-form-item>
            <el-form-item label="手续照片">
              <qiniu :qiniuImage="childItem.proceduresPics" :id="childItem.inspectionPics.id" ></qiniu>
            </el-form-item>
            
          </el-container>
          </div>
        </el-collapse-item>

      </el-collapse>
    </el-card>
    <el-card class="box-card">
      <el-form-item label="资源审核意见" prop="opinion">
        <el-input v-model="ruleForm.opinion" placeholder="必填，300字限制。" :maxlength='100' :disabled='dialogSendData.isAdd'></el-input>
      </el-form-item>
    </el-card>
    <el-form-item class='align'>
      <el-button type="primary" @click="resetForm('ruleForm')">返回</el-button>
      <el-button @click="submitForm('ruleForm')" v-if='!dialogSendData.isAdd'>提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import qiniu from '@/views/qiniu/upload';
  import {
    require,
    prop,
    decimalTwo,
    muchVerification
  } from '@/utils/rules.js' //表单验证规则
  import agentHttp from '@/utils/agentHttp.js';
  import {qiniuArray,timestampToTime} from '@/utils/index.js'
  // import MyInput from '../../Input/index.vue' ;
  export default {
    data() {
      return {
        ruleForm: {
         opinion:'',
        },
        rules: {
          opinion:[require("资源审核意见")]
        },
        activeNames: [], // 汽车选项卡
      };
    },
    methods: {
      submitForm(formName) {      //提交数据
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.takeData(this.ruleForm)
           agentHttp.postJson(`adminApi/admin/mortgage_order/review_order/sumbit`,this.takeData(this.ruleForm)).then(res=>{
                this.$message.success(res.data||"修改成功");  
                this.dialogSendData.dialogFormVisible = false;        
                 this.$emit('Refresh',null);        
           })

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogSendData.dialogFormVisible = false;
      },

      initData() { //初始化数据
        agentHttp.get(`adminApi/admin/mortgage_order/review_order_detail/${this.mortgageOrderExtendId}`).then((data) => {
          this.ruleForm = Object.assign({}, data.data, this.ruleForm);
          this.ruleForm.opinion  = this.ruleForm.resourceAuditOpinion
            qiniuArray(this.ruleForm)     // 取出青牛字段
        })
      },
      getDate(time){
        return timestampToTime(time)
      },

  takeData(data) { // 取出数据传递给后台
        
        const params = {
          mortgageOrderExtendId: data.id,
          resourceAuditOpinion: data.opinion,
          types: []          
        };
        data.carTypes.map((item, index) => {
          return params.types.push({
            mortgageOrderDetailId: item.id,
            carMortgageMoney: item.carMortgageMoney
          })

        })

        return params

      },

      inspect(code,data){
        var type = decimalTwo ;
          return muchVerification(code,data,type)
      }
    },
    props: {
      dialogSendData: {
        type: Object
      },
      mortgageOrderExtendId: {
        type: Number
      }
    },
    mounted() {
      this.initData();
    },
    components: {
      qiniu,
      // MyInput
    }
  };

</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
  }

  .align {
    margin: 50px auto 0;
    text-align: center;
  }
  .title {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 30px;
    padding: 5px 0 5px 5px;
    display: flex;
    margin-bottom: 10px;
  }

</style>
